<template>
  <div
    class="app-container"
    v-loading="loading"
    style="height: calc(100% - 35px); padding: 5px"
  >
    <div class="top-1">
      <el-dropdown style="position: absolute; left: 3vw" trigger="click">
        <span class="el-dropdown-link" style="background-color: green;color: white !important;font-size: 6vh;padding: 10px;">
          {{ stockUpName?stockUpName:"?号备货场" }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="choiceStockUpName('①号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ①号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('②号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ②号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('③号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ③号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('④号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ④号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('⑤号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ⑤号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('⑥号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ⑥号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('⑦号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ⑦号备货场
              </span>
            </el-dropdown-item>
            <el-dropdown-item @click="choiceStockUpName('⑧号备货场')" >
              <span style="font-size: 3vh; margin: 5px">
                ⑧号备货场
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      &nbsp;&nbsp;正&nbsp;&nbsp;在&nbsp;&nbsp;备&nbsp;&nbsp;货&nbsp;&nbsp;中
      <el-dropdown style="position: absolute; right: 1vw" trigger="click">
        <span class="el-dropdown-link">
          <el-icon size="5vh"><Setting /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goBack"
              ><span style="font-size: 3vh; margin: 5px"
                >返回首页</span
              ></el-dropdown-item
            >
            <el-dropdown-item @click="showFinished"
              ><span style="font-size: 3vh; margin: 5px"
                >备货完成</span
              ></el-dropdown-item
            >
            <el-dropdown-item @click="reset"
              ><span style="font-size: 3vh; margin: 5px"
                >重置页面</span
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="top-2">
      <div
        class="top-2-left"
        :style="{ 'background-color': getCustomerColor() }"
      >
        【客户】
      </div>
      <div
        class="top-2-right"
        :style="{ 'background-color': getCustomerColor() }"
        @click="choiceCustomer"
      >
        {{ stockUpInfo.customerName }}
      </div>
    </div>
    <div class="top-3">
      <div class="top-3-left">
        <div class="top-3-left-1">出货日期</div>
        <div class="top-3-left-2" @click="choiceDisptchDate">
          {{ stockUpInfo.dispatchDate }}
        </div>
      </div>
      <div class="top-3-right">
        <div class="top-3-right-1">集货开始时间</div>
        <div class="top-3-right-2" @click="choiceStartTime">
          {{
            stockUpInfo.startTime
              ? moment(stockUpInfo.startTime).format("YY-MM-DD HH:mm")
              : ""
          }}
        </div>
      </div>
    </div>
    <div class="top-3">
      <div class="top-3-left">
        <div class="top-3-left-1">出货托数</div>
        <div class="top-3-left-2" @click="setTrayQty">
          {{ stockUpInfo.trayQty }}
        </div>
      </div>
      <div class="top-3-right">
        <div class="top-3-right-1">集货结束时间</div>
        <div class="top-3-right-2" @click="choiceEndTime">
          {{
            stockUpInfo.endTime
              ? moment(stockUpInfo.endTime).format("YY-MM-DD HH:mm")
              : ""
          }}{{ stockUpInfo.endTime ? "(预定)" : "" }}
        </div>
      </div>
    </div>
    <div class="top-4" v-if="stockUpInfo.customerType == 1">
      <div class="top-4-left">
        {{ top4Type == 1 ? "集装箱柜号" : "车牌号" }}
        <el-button
          link
          type="primary"
          @click="changeTop4Name"
          style="position: absolute; left: 1vw"
        >
          <el-icon size="5vh" v-if="top4Type == 2"><ArrowUpBold /></el-icon>
          <el-icon size="5vh" v-if="top4Type == 1"><ArrowDownBold /></el-icon>
        </el-button>
      </div>
      <div class="top-4-right" @click="setContainerNo">
        {{ stockUpInfo.containerNo }}
      </div>
    </div>
    <div class="top-5">包装样式</div>
    <BottomForeignDiv
      v-if="stockUpInfo.customerType == 1"
      :stockUpInfo="stockUpInfo"
    ></BottomForeignDiv>
    <BottomOtherDiv v-else :stockUpInfo="stockUpInfo"></BottomOtherDiv>
    <div v-show="finishedShow" class="finished-div">
      <div class="finished-div-emputy">&nbsp;</div>
      <div class="finished-div-top">备货完成</div>
      <div class="finished-div-bottom">
        <span>
          待&nbsp;装&nbsp;车
          <el-button type="primary" link style="position: absolute; right: 5vw;bottom: 3vh;font-size: 2.5vh;" @click="truckLoadingFinished">返回</el-button>
        </span>
      </div>
    </div>
    <!--客户选择弹框-->
    <el-dialog
      title="选择客户"
      v-model="openCustomer"
      width="500px"
      append-to-body
    >
      <el-form label-width="80px" size="large">
        <el-form-item label="客户" required>
          <el-select
            v-model="customerId"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in customerList"
              :key="`customer_` + item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmCustomer">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--出货日期选择弹框-->
    <el-dialog
      title="选择出货日期"
      v-model="openDispatch"
      width="500px"
      append-to-body
    >
      <el-form label-width="80px" size="large">
        <el-form-item label="出货日期" required>
          <el-date-picker
            v-model="dispatchDate"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            style="width: 100%"
            placeholder="出货日期"
            size="large"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmDispatchDateNow"
            >当前日期</el-button
          >
          <el-button type="primary" @click="confirmDispatchDate"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--集货开始时间选择弹框-->
    <el-dialog
      title="选择集货开始时间"
      v-model="openStartTime"
      width="500px"
      append-to-body
    >
      <el-form label-width="80px" size="large">
        <el-form-item label="开始日期" required>
          <el-date-picker
            v-model="startDate"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="开始日期"
            style="width: 100%"
            size="large"
          />
        </el-form-item>
        <el-form-item label="小时" required>
          <el-select
            v-model="startHour"
            placeholder="请选择"
            style="width: 100%"
            clearable
          > 
            <el-option
              v-for="item in 24"
              :key="`hour_` + item"
              :label="`${item - 1}点`"
              :value="item - 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分钟" required>
          <el-select
            v-model="startMinute"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in 60"
              :key="`minute_` + item"
              :label="`${item - 1}分`"
              :value="item - 1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmStartTimeNow"
            >当前时间</el-button
          >
          <el-button type="primary" @click="confirmStartTime">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--出货托数选择弹框-->
    <el-dialog
      title="出货托数"
      v-model="openTrayQty"
      width="500px"
      append-to-body
    >
      <el-form label-width="80px" size="large">
        <el-form-item label="出货托数" required>
          <el-input-number
            style="width: 100%"
            :step="1"
            :precision="0"
            @focus="openSystemKeyboard"
            v-model="trayQty"
            :min="1"
            size="large"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmTrayQty">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--集货结束时间选择弹框-->
    <el-dialog
      title="选择集货结束时间"
      v-model="openEndTime"
      width="500px"
      append-to-body
    >
      <el-form label-width="80px" size="large">
        <el-form-item label="结束日期" required>
          <el-date-picker
            v-model="endDate"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="结束日期"
            style="width: 100%"
            size="large"
          />
        </el-form-item>
        <el-form-item label="小时" required>
          <el-select
            v-model="endHour"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in 24"
              :key="`hour_` + item"
              :label="`${item - 1}点`"
              :value="item - 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分钟" required>
          <el-select
            v-model="endMinute"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in 60"
              :key="`minute_` + item"
              :label="`${item - 1}分`"
              :value="item - 1"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmEndTime">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--车牌号/集装箱柜号选择弹框-->
    <el-dialog
      :title="top4Type == 1 ? `集装箱柜号` : `车牌号`"
      v-model="openContainerNo"
      width="500px"
      append-to-body
    >
      <el-form label-width="110px" size="large">
        <el-form-item :label="top4Type == 1 ? `集装箱柜号` : `车牌号`" required>
          <el-input
            v-model="containerNo"
            @focus="openSystemKeyboard"
            style="width: 100%"
            :placeholder="`请输入${top4Type == 1 ? `集装箱柜号` : `车牌号`}`"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmContainerNo"
            >确 定</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Post">
// import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
import { get } from "@vueuse/core";
import { nextTick } from "vue";
import { ElLoading } from "element-plus";
import BottomForeignDiv from "./bottomForeignDiv.vue";
import BottomOtherDiv from "./bottomOtherDiv.vue";
import moment from "moment";
const props = defineProps({
  // 数据
  customer: {
    type: Object,
    default: undefined,
  },
});
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const loading = ref(true);
const stockUpInfo = ref({});
const customerList = ref([]);
const customerId = ref();
const openCustomer = ref(false);
const openDispatch = ref(false);
const dispatchDate = ref();
const openStartTime = ref(false);
const startDate = ref();
const startHour = ref();
const startMinute = ref();
const openTrayQty = ref(false);
const trayQty = ref();
const openEndTime = ref(false);
const endDate = ref();
const endHour = ref();

const endMinute = ref();
const openContainerNo = ref(false);
const containerNo = ref();
const finishedShow = ref(false);

const stockUpName = ref(localStorage.getItem('stockUpName'));

const choiceStockUpName = (value)=>{
  stockUpName.value = value;
  localStorage.setItem('stockUpName', value);
}
const goBack = () => {
  emit("close");
};

const showFinished = () => {
  if (finishedDisabled()) {
    proxy.$modal.msgError("请将数据填写完成！");
    return;
  }
  finishedShow.value = true;
};

const getCustomerColor = () => {
  if (stockUpInfo.value.customerType == 1) {
    return "#92D050";
  }
  if (stockUpInfo.value.customerType == 2) {
    return "yellow";
  }
  if (stockUpInfo.value.customerType == 3) {
    return "#FFC000";
  }
  return "white";
};

async function getCustomerList() {
  loading.value = true;
  try {
    let result = await window.base.listCustomer({});
    customerList.value = result ? result : [];
  } catch (e) {
  } finally {
    loading.value = false;
  }
}
const choiceCustomer = () => {
  customerId.value = undefined;
  openCustomer.value = true;
};
const confirmCustomer = () => {
  let customer = customerList.value.find((c) => c.id == customerId.value);
  if (customer) {
    stockUpInfo.value = { ...customer };
    stockUpInfo.value.customerName = customer.name;
    stockUpInfo.value.name = undefined;
    stockUpInfo.value.customerType = customer.type;
    stockUpInfo.value.type = undefined;
    stockUpInfo.value.customerId = customer.id;
    stockUpInfo.value.id = undefined;
  }
  cancel();
};
const choiceDisptchDate = () => {
  if (!stockUpInfo.value.customerId) {
    proxy.$modal.msgError("请先选择客户！");
    return;
  }
  openDispatch.value = true;
};
const confirmDispatchDate = () => {
  if (dispatchDate.value) {
    stockUpInfo.value.dispatchDate = dispatchDate.value;
  }
  cancel();
};
const confirmDispatchDateNow = () => {
  let now = moment();
  stockUpInfo.value.dispatchDate = now.format("YYYY-MM-DD");
  cancel();
};
const choiceStartTime = () => {
  if (!stockUpInfo.value.customerId) {
    proxy.$modal.msgError("请先选择客户！");
    return;
  }
  openStartTime.value = true;
};
const confirmStartTime = () => {
  if (startDate.value) {
    let time = startDate.value;
    if (startHour.value == undefined) {
      startHour.value = 0;
    }
    time += ` ${startHour.value < 10 ? "0" : ""}${startHour.value}`;
    if (startMinute.value == undefined) {
      startMinute.value = 0;
    }
    time += `:${startMinute.value < 10 ? "0" : ""}${startMinute.value}:00`;
    stockUpInfo.value.startTime = time;
  }
  cancel();
};
const confirmStartTimeNow = () => {
  let now = moment();
  stockUpInfo.value.startTime = now.format("YYYY-MM-DD HH:mm:ss");
  cancel();
};

const setTrayQty = () => {
  if (!stockUpInfo.value.customerId) {
    proxy.$modal.msgError("请先选择客户！");
    return;
  }
  openTrayQty.value = true;
};
const confirmTrayQty = () => {
  if (trayQty.value != undefined) {
    stockUpInfo.value.trayQty = trayQty.value;
  }
  cancel();
};
const choiceEndTime = () => {
  if (!stockUpInfo.value.customerId) {
    proxy.$modal.msgError("请先选择客户！");
    return;
  }
  openEndTime.value = true;
};
const confirmEndTime = () => {
  if (endDate.value) {
    let time = endDate.value;
    if (endHour.value == undefined) {
      endHour.value = 0;
    }
    time += ` ${endHour.value < 10 ? "0" : ""}${endHour.value}`;
    if (endMinute.value == undefined) {
      endMinute.value = 0;
    }
    time += `:${endMinute.value < 10 ? "0" : ""}${endMinute.value}:00`;
    stockUpInfo.value.endTime = time;
  }
  cancel();
};
const setContainerNo = () => {
  if (!stockUpInfo.value.customerId) {
    proxy.$modal.msgError("请先选择客户！");
    return;
  }
  openContainerNo.value = true;
};
const confirmContainerNo = () => {
  stockUpInfo.value.containerNo = containerNo.value;
  cancel();
};

/** 取消按钮 */
function cancel() {
  window.base.closeVirtualKeyboard();
  openCustomer.value = false;
  customerId.value = undefined;
  openDispatch.value = false;
  dispatchDate.value = undefined;
  openStartTime.value = false;
  startDate.value = undefined;
  startHour.value = undefined;
  startMinute.value = undefined;
  openTrayQty.value = false;
  trayQty.value = undefined;
  openEndTime.value = false;
  endDate.value = undefined;
  endHour.value = undefined;
  endMinute.value = undefined;
  openContainerNo.value = false;
  containerNo.value = undefined;
}

const finishedDisabled = () => {
  return (
    stockUpInfo.value.customerId == undefined ||
    stockUpInfo.value.dispatchDate == undefined ||
    stockUpInfo.value.startTime == undefined ||
    stockUpInfo.value.trayQty == undefined ||
    stockUpInfo.value.endTime == undefined
  );
};

const top4Type = ref(1);

const changeTop4Name = () => {
  top4Type.value = top4Type.value == 1 ? 2 : 1;
};

const openSystemKeyboard = () => {
  window.base.openVirtualKeyboard();
};

const truckLoadingFinished = ()=>{
  finishedShow.value =false;
  reset();
}

const reset = ()=>{
  stockUpInfo.value = {};
}

getCustomerList();
</script>
<style lang='scss' scoped>
.top-1 {
  text-align: center;
  height: 9.8%;
  font-size: 6.5vh;
  font-weight: bolder;
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  /* 自动换行（默认开启，可显式声明） */
  word-wrap: break-word; /* 强制换行（支持长单词/URL） */
  white-space: normal; /* 允许文本换行（默认值，可省略） */
}
.top-2 {
  height: 13.2%;
  border-right: 1px solid black;
  border-left: 1px solid black;
  .top-2-left {
    width: 40%;
    height: 100%;
    text-align: center;
    font-size: 9vh;
    font-weight: bolder;
    float: left;
    border: 1px solid black;
  }
  .top-2-right {
    width: 60%;
    height: 100%;
    text-align: center;
    font-size: 9vh;
    font-weight: bolder;
    float: left;
    border: 1px solid black;
  }
}
.top-3 {
  height: 7.3%;
  border-right: 1px solid black;
  border-left: 1px solid black;
  .top-3-left {
    width: 40%;
    height: 100%;
    float: left;
    .top-3-left-1 {
      width: 45%;
      height: 100%;
      text-align: center;
      font-size: 4.8vh;
      float: left;
      border: 1px solid black;
    }
    .top-3-left-2 {
      width: 55%;
      height: 100%;
      text-align: center;
      font-size: 4.8vh;
      float: left;
      border: 1px solid black;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */

      /* 自动换行（默认开启，可显式声明） */
      word-wrap: break-word; /* 强制换行（支持长单词/URL） */
      white-space: normal; /* 允许文本换行（默认值，可省略） */
    }
  }
  .top-3-right {
    width: 60%;
    height: 100%;
    float: left;
    .top-3-right-1 {
      width: 45%;
      height: 100%;
      text-align: center;
      font-size: 4.8vh;
      float: left;
      border: 1px solid black;
    }
    .top-3-right-2 {
      padding-left: 20px;
      width: 55%;
      height: 100%;
      text-align: left;
      font-size: 4vh;
      float: left;
      border: 1px solid black;
      display: flex;
      justify-content: left; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      /* 自动换行（默认开启，可显式声明） */
      word-wrap: break-word; /* 强制换行（支持长单词/URL） */
      white-space: normal; /* 允许文本换行（默认值，可省略） */
    }
  }
}
.top-4 {
  height: 7.3%;
  border-right: 1px solid black;
  border-left: 1px solid black;
  .top-4-left {
    width: 40%;
    height: 100%;
    text-align: center;
    font-size: 4.5vh;
    float: left;
    border: 1px solid black;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    /* 自动换行（默认开启，可显式声明） */
    word-wrap: break-word; /* 强制换行（支持长单词/URL） */
    white-space: normal; /* 允许文本换行（默认值，可省略） */
  }
  .top-4-right {
    width: 60%;
    height: 100%;
    text-align: center;
    font-size: 4.5vh;
    float: left;
    border: 1px solid black;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    /* 自动换行（默认开启，可显式声明） */
    word-wrap: break-word; /* 强制换行（支持长单词/URL） */
    white-space: normal; /* 允许文本换行（默认值，可省略） */
  }
}
.top-5 {
  text-align: center;
  height: 6.1%;
  font-size: 4vh;
  border-right: 2px solid black;
  border-left: 2px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  // border: 1px solid black;
}
/* 内容区域背景（可选：如需局部不透明） */
.finished-div {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0); /* 半透明遮罩 */
  z-index: 999999; /* 确保在其他元素上方 */
  .finished-div-emputy{
    height: 40vh;
    background-color: rgba(0, 176, 240, 0);
  }
  .finished-div-top {
    height: 25vh;
    background-color: rgba(0, 176, 240, 0.7);
    font-size: 15vh;
    font-weight: bold;
    color: rgb(61, 61, 61,0.8);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    /* 自动换行（默认开启，可显式声明） */
    word-wrap: break-word; /* 强制换行（支持长单词/URL） */
    white-space: normal; /* 允许文本换行（默认值，可省略） */
  }
  .finished-div-bottom {
    height: 35vh;
    background-color: rgba(255, 255, 0, 0.7);
    font-size: 20vh;
    font-weight: bold;
    color: rgb(61, 61, 61,0.8);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    /* 自动换行（默认开启，可显式声明） */
    word-wrap: break-word; /* 强制换行（支持长单词/URL） */
    white-space: normal; /* 允许文本换行（默认值，可省略） */
  }
}
</style>
